<script>
import { isExternal } from '@/utils/validate';

export default {
    name: 'MivaLink',
    props: {
        to: {
            type: String,
            default: '/',
        },
        color: String,
        isNewTag: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        targetSetting() {
            return this.isNewTag ? '_blank' : '_self';
        },
    },
    render() {
        return isExternal(this.to)
            ? <a draggable="false" class="miva-link__item" style={{ color: this.color }} href={this.to} target="_blank" >{this.$slots.default}</a >
            : <router-link draggable="false" class="miva-link__item" style={{ color: this.color }} to={this.to} target={this.targetSetting}>{this.$slots.default}</router-link>;
    },
};
</script>

<style>
.miva-link__item {
  display: block;
}
</style>
